<template>
    <div class="root">
        <div class="first">
            <div class="commheader">
                <div class="subheader">
                    <div>
                        <svg t="1706169190996" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4364" width="200" height="200">
                            <path
                                d="M400.696008 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.984503 31.233352 31.233352 31.233352s31.233352-13.984503 31.233352-31.233352l0-30.470989C431.92936 143.078673 417.944857 129.093147 400.696008 129.093147z"
                                fill="#999999" p-id="4365"></path>
                            <path
                                d="M623.647823 129.093147c-17.248849 0-31.233352 13.984503-31.233352 31.233352l0 30.470989c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.984503 31.233352-31.233352l0-30.470989C654.881175 143.078673 640.896672 129.093147 623.647823 129.093147z"
                                fill="#999999" p-id="4366"></path>
                            <path
                                d="M425.695379 312.937269c11.209296 18.047028 41.974997 48.588625 86.152149 48.588625 43.958164 0 75.100442-30.308283 86.573751-48.223305 9.302877-14.528901 5.068436-33.846876-9.455349-43.149752-14.539134-9.307993-33.851992-5.063319-43.149752 9.455349-0.121773 0.198521-13.379729 19.449981-33.968649 19.449981-19.993357 0-32.428573-18.107403-33.271778-19.373233-9.17087-14.417361-28.28009-18.799158-42.829458-9.760295C421.089477 279.028994 416.591023 298.28557 425.695379 312.937269z"
                                fill="#999999" p-id="4367"></path>
                            <path
                                d="M564.242851 625.945145l-20.278859 0L543.963992 462.486306c0-17.253966-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.979386-31.233352 31.233352l0 163.457816-20.283975 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L647.532813 709.234083C647.532813 663.309124 610.168834 625.945145 564.242851 625.945145zM585.066109 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L461.214337 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L440.392102 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L585.066109 812.258505z"
                                fill="#999999" p-id="4368"></path>
                            <path
                                d="M250.808256 625.945145l-17.482163 0 0-266.970354c0-35.483142 28.864398-64.35368 64.343447-64.35368 17.248849 0 31.233352-13.984503 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352c-69.924559 0-126.810151 56.890708-126.810151 126.820384l0 266.970354-23.079648 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.029538 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L334.099241 709.234083C334.098217 663.309124 296.734238 625.945145 250.808256 625.945145zM271.630491 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L147.778718 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L126.956484 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.029538 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L271.630491 812.258505z"
                                fill="#999999" p-id="4369"></path>
                            <path
                                d="M876.565113 625.945145l-21.961174 0 0-266.970354c0-69.929676-56.890708-126.820384-126.815267-126.820384-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.984503 31.233352 31.233352 31.233352c35.483142 0 64.348564 28.869514 64.348564 64.35368l0 266.970354-18.605753 0c-45.924959 0-83.289961 37.363979-83.289961 83.289961l0 103.024421c0 45.924959 37.363979 83.289961 83.289961 83.289961l103.034655 0c45.924959 0 83.289961-37.363979 83.289961-83.289961L959.856098 709.234083C959.854051 663.309124 922.490072 625.945145 876.565113 625.945145zM897.387347 812.258505c0 11.286044-9.537214 20.822235-20.822235 20.822235L773.530458 833.080739c-11.286044 0-20.822235-9.537214-20.822235-20.822235L752.708224 709.234083c0-11.286044 9.537214-20.822235 20.822235-20.822235l103.034655 0c11.286044 0 20.822235 9.537214 20.822235 20.822235L897.387347 812.258505z"
                                fill="#999999" p-id="4370"></path>
                        </svg>
                    </div>
                    <span>常见科室</span>
                </div>
                <div><span>全部 ></span></div>
            </div>
            <div class="depart">
                <ul>
                    <li v-for="item in department" :key="item">{{ item }}</li>
                </ul>
            </div>
        </div>
        <div class="sec">
            <div class="commheader">
                <div class="subheader">
                    <div>
                        <svg t="1706171588783" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6409" width="200" height="200">
                            <path
                                d="M883.497674 409.6l-33.339534 33.339535L569.153488 161.934884l35.720931-33.339535zM140.502326 409.6l35.72093 33.339535L454.846512 161.934884l-33.339535-33.339535z"
                                fill="#f0584c" p-id="6410"></path>
                            <path
                                d="M512 214.325581c52.390698 0 95.255814-42.865116 95.255814-95.255814s-42.865116-95.255814-95.255814-95.255814-95.255814 42.865116-95.255814 95.255814 42.865116 95.255814 95.255814 95.255814z m0 23.813954c-66.67907 0-119.069767-52.390698-119.069767-119.069768s52.390698-119.069767 119.069767-119.069767 119.069767 52.390698 119.069767 119.069767-52.390698 119.069767-119.069767 119.069768z"
                                fill="#f0584c" p-id="6411"></path>
                            <path
                                d="M512 166.697674c26.195349 0 47.627907-21.432558 47.627907-47.627907s-21.432558-47.627907-47.627907-47.627907-47.627907 21.432558-47.627907 47.627907 21.432558 47.627907 47.627907 47.627907z m0 47.627907c-52.390698 0-95.255814-42.865116-95.255814-95.255814s42.865116-95.255814 95.255814-95.255814 95.255814 42.865116 95.255814 95.255814-42.865116 95.255814-95.255814 95.255814zM107.162791 452.465116c-26.195349 0-47.627907 21.432558-47.627907 47.627907v428.651163c0 26.195349 21.432558 47.627907 47.627907 47.627907h809.674418c26.195349 0 47.627907-21.432558 47.627907-47.627907V500.093023c0-26.195349-21.432558-47.627907-47.627907-47.627907H107.162791z m0-47.627907h809.674418c52.390698 0 95.255814 42.865116 95.255814 95.255814v428.651163c0 52.390698-42.865116 95.255814-95.255814 95.255814H107.162791c-52.390698 0-95.255814-42.865116-95.255814-95.255814V500.093023c0-52.390698 42.865116-95.255814 95.255814-95.255814z"
                                fill="#f0584c" p-id="6412"></path>
                            <path
                                d="M321.488372 664.409302H226.232558V714.418605h80.967442v35.72093H226.232558V833.488372H185.748837v-202.418605H321.488372v33.339535z m176.223256 66.67907c0 35.72093 0 59.534884-21.432558 80.967442-14.288372 14.288372-30.95814 21.432558-54.772093 21.432558s-40.483721-7.144186-54.772093-21.432558c-21.432558-21.432558-19.051163-45.246512-19.051163-80.967442s0-59.534884 19.051163-80.967442c14.288372-14.288372 30.95814-21.432558 54.772093-21.432558s40.483721 7.144186 54.772093 21.432558c23.813953 21.432558 21.432558 47.627907 21.432558 80.967442z m-38.102326 0c0-38.102326-2.381395-47.627907-9.525581-57.153488-4.762791-7.144186-14.288372-11.906977-26.195349-11.906977-11.906977 0-19.051163 4.762791-26.195349 11.906977-7.144186 9.525581-9.525581 19.051163-9.525581 57.153488s2.381395 47.627907 9.525581 57.153488c4.762791 7.144186 14.288372 11.906977 26.195349 11.906977 11.906977 0 19.051163-4.762791 26.195349-11.906977 7.144186-7.144186 9.525581-16.669767 9.525581-57.153488z m209.562791-66.67907h-52.390698V833.488372h-40.483721v-169.07907h-52.390697v-35.72093h145.265116v35.72093z m190.511628 169.07907h-40.483721l-11.906977-35.72093h-71.44186l-14.288372 35.72093h-40.483721l73.823256-202.418605h30.958139l73.823256 202.418605z m-64.297674-69.060465l-23.813954-73.823256-26.195349 73.823256h50.009303z"
                                fill="#f0584c" p-id="6413"></path>
                        </svg>
                    </div>
                    <span>平台公告</span>
                </div>
                <div><span>全部 ></span></div>
            </div>
            <div class="comlist">
                <p v-for="item in platanno" :key="item">{{ item }}</p>
            </div>
        </div>
        <div class="thir">
            <div class="commheader">
                <div class="subheader">
                    <div>
                        <svg t="1706171588783" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6409" width="200" height="200">
                            <path
                                d="M883.497674 409.6l-33.339534 33.339535L569.153488 161.934884l35.720931-33.339535zM140.502326 409.6l35.72093 33.339535L454.846512 161.934884l-33.339535-33.339535z"
                                fill="#f0584c" p-id="6410"></path>
                            <path
                                d="M512 214.325581c52.390698 0 95.255814-42.865116 95.255814-95.255814s-42.865116-95.255814-95.255814-95.255814-95.255814 42.865116-95.255814 95.255814 42.865116 95.255814 95.255814 95.255814z m0 23.813954c-66.67907 0-119.069767-52.390698-119.069767-119.069768s52.390698-119.069767 119.069767-119.069767 119.069767 52.390698 119.069767 119.069767-52.390698 119.069767-119.069767 119.069768z"
                                fill="#f0584c" p-id="6411"></path>
                            <path
                                d="M512 166.697674c26.195349 0 47.627907-21.432558 47.627907-47.627907s-21.432558-47.627907-47.627907-47.627907-47.627907 21.432558-47.627907 47.627907 21.432558 47.627907 47.627907 47.627907z m0 47.627907c-52.390698 0-95.255814-42.865116-95.255814-95.255814s42.865116-95.255814 95.255814-95.255814 95.255814 42.865116 95.255814 95.255814-42.865116 95.255814-95.255814 95.255814zM107.162791 452.465116c-26.195349 0-47.627907 21.432558-47.627907 47.627907v428.651163c0 26.195349 21.432558 47.627907 47.627907 47.627907h809.674418c26.195349 0 47.627907-21.432558 47.627907-47.627907V500.093023c0-26.195349-21.432558-47.627907-47.627907-47.627907H107.162791z m0-47.627907h809.674418c52.390698 0 95.255814 42.865116 95.255814 95.255814v428.651163c0 52.390698-42.865116 95.255814-95.255814 95.255814H107.162791c-52.390698 0-95.255814-42.865116-95.255814-95.255814V500.093023c0-52.390698 42.865116-95.255814 95.255814-95.255814z"
                                fill="#f0584c" p-id="6412"></path>
                            <path
                                d="M321.488372 664.409302H226.232558V714.418605h80.967442v35.72093H226.232558V833.488372H185.748837v-202.418605H321.488372v33.339535z m176.223256 66.67907c0 35.72093 0 59.534884-21.432558 80.967442-14.288372 14.288372-30.95814 21.432558-54.772093 21.432558s-40.483721-7.144186-54.772093-21.432558c-21.432558-21.432558-19.051163-45.246512-19.051163-80.967442s0-59.534884 19.051163-80.967442c14.288372-14.288372 30.95814-21.432558 54.772093-21.432558s40.483721 7.144186 54.772093 21.432558c23.813953 21.432558 21.432558 47.627907 21.432558 80.967442z m-38.102326 0c0-38.102326-2.381395-47.627907-9.525581-57.153488-4.762791-7.144186-14.288372-11.906977-26.195349-11.906977-11.906977 0-19.051163 4.762791-26.195349 11.906977-7.144186 9.525581-9.525581 19.051163-9.525581 57.153488s2.381395 47.627907 9.525581 57.153488c4.762791 7.144186 14.288372 11.906977 26.195349 11.906977 11.906977 0 19.051163-4.762791 26.195349-11.906977 7.144186-7.144186 9.525581-16.669767 9.525581-57.153488z m209.562791-66.67907h-52.390698V833.488372h-40.483721v-169.07907h-52.390697v-35.72093h145.265116v35.72093z m190.511628 169.07907h-40.483721l-11.906977-35.72093h-71.44186l-14.288372 35.72093h-40.483721l73.823256-202.418605h30.958139l73.823256 202.418605z m-64.297674-69.060465l-23.813954-73.823256-26.195349 73.823256h50.009303z"
                                fill="#f0584c" p-id="6413"></path>
                        </svg>
                    </div>
                    <span>停诊公告</span>
                </div>
                <div><span>全部 ></span></div>
            </div>
            <div class="comlist">
                <p v-for="item in closeanno" :key="item">{{ item }}</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let department = ref<string[]>([
    "神经内科",
    "消化内科",
    "呼吸内科",
    "内科",
    "神经外科",
    "妇科",
    "产科",
    "儿科",
]);
let platanno = ref<string[]>([
    "关于延长北京大学国际医院放假的通知",
    "北京中医药大学东方医院部分科室医生门诊医",
    "武警总医院号源暂停更新通知",
]);
let closeanno = ref<string[]>([
    "中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告",
    "首都医科大学附属北京潞河医院老年医学科门诊停诊公告",
    "中日友好医院中西医结合心内科门诊停诊公告"
])
</script>
<style lang="scss" scoped>
.root {
    color: #7f7f7f;
}

.first {
    .depart {
        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                width: 40%;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }
}

.comlist {
    display: flex;
    justify-content: left;
    flex-direction: column;

    p {
        margin-top: 20px;
        // 溢出隐藏
        overflow: hidden;
        // 如果超出范围，隐藏的样式为后面追加省略号
        text-overflow: ellipsis;
        //不换行显示
        text-wrap: nowrap;
        cursor: pointer;
    }
}

.commheader {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .subheader {
        display: flex;
        justify-content: left;
        align-items: center;

        span {
            margin-left: 5px;
            cursor: pointer;
        }
    }

    svg {
        width: 16px;
        height: 16px;
    }
}
</style>
